<template>
  <div class="dashboard-container">
    <div class="app-container">
      <page-tools :show-before="true">
        <span slot="before">共{{ page.total }}条记录</span>
        <template slot="after">
          <el-button
            size="small"
            type="warning"
            @click="$router.push('/import')"
          >导入</el-button>
          <el-button
            size="small"
            type="danger"
            @click="exportEmployees"
          >导出</el-button>
          <el-button
            v-if="checkPermission('addEmployee')"
            size="small"
            type="primary"
            @click="addEmployee"
          >新增员工</el-button>
        </template>
      </page-tools>
      <!-- 放置表格和分页 -->
      <el-card>
        <el-table border :data="list">
          <el-table-column label="序号" sortable="">
            <template #default="scope">
              {{ (page.page - 1) * page.size + (scope.$index + 1) }}
            </template>
          </el-table-column>
          <el-table-column label="头像" sortable="" width="121">
            <template #default="{ row }">
              <img
                v-imgerr="require('@/assets/common/cute.jpeg')"
                style="width: 100px"
                :src="row.staffPhoto"
                alt=""
                @click="showQrCode(row.staffPhoto)"
              >
            </template>
          </el-table-column>

          <el-table-column label="姓名" sortable="" prop="username" />
          <el-table-column label="工号" sortable="" prop="workNumber" />
          <el-table-column
            label="聘用形式"
            sortable=""
            prop="formOfEmployment"
            :formatter="fromatFormEmployment"
          />
          <el-table-column label="部门" sortable="" prop="departmentName" />
          <el-table-column label="入职时间" sortable="">
            <template #default="{ row }">
              {{ row.timeOfEntry | formatDate }}
            </template>
          </el-table-column>
          <el-table-column label="账户状态" sortable="">
            <template #default="{ row }">
              <!-- v-model是由v-bind动态绑定一个值 与 v-on绑定一个input事件来运行 -->
              <!-- v-model本质上是一个语法糖。如下代码<input v-model="test">本质上是<input :value="test" @input="test = $event.target.value">，其中@input是对<input>输入事件的一个监听:value="test"是将监听事件中的数据放入到input，下面代码是v-model的一个简单的例子。在这边需要强调一点，v-model不仅可以给input赋值还可以获取input中的数据，而且数据的获取是实时的，因为语法糖中是用@input对输入框进行监听的。 -->
              <el-switch :value="row.enableState === 1" />
            </template>
          </el-table-column>
          <el-table-column label="操作" sortable="" fixed="right" width="280">
            <!-- 作用域插槽获取到当前点击行的id，存放在row中，解构出来 -->
            <template #default="{ row }">
              <el-button
                type="text"
                size="small"
                @click="$router.push('employees/details/' + row.id)"
              >查看</el-button>
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button type="text" size="small" @click="editRole(row.id)">角色</el-button>
              <el-button
                type="text"
                size="small"
                @click="delEmployee(row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row
          type="flex"
          justify="center"
          align="middle"
          style="height: 60px"
        >
          <el-pagination
            layout="prev, pager, next"
            :total="page.total"
            :page-size="page.size"
            :current-page="page.page"
            @current-change="currentChange"
          />
        </el-row>
      </el-card>

      <!-- 新增员工弹窗 -->
      <addEmployee
        :show-dialog.sync="showDialog"
        @addEmployee="refreshEmployeeList()"
      />
      <el-dialog
        :visible="showCanvas"
        title="员工头像二维码"
        @close="showCanvas = false"
      >
        <el-row type="flex" justify="center">
          <canvas ref="myCanvas" />
        </el-row>
      </el-dialog>

      <!-- 编辑角色弹窗 -->
      <AssignRole ref="assignRole" :show-role-dialog.sync="showRoleDialog" :user-id="userId" />
    </div>
  </div>
</template>

<script>
import { getEmployee, delEmployee } from '@/api/employees'
import employmentEnum from '@/api/constant/employees'
import { formatDate } from '@/filters/index'
import addEmployee from './components/add-employee'
import AssignRole from './components/assign-role'
import QRCode from 'qrcode'
export default {
  components: {
    addEmployee,
    AssignRole
  },
  data() {
    return {
      list: [], // 接员工列表数据
      page: {
        page: 1,
        size: 6,
        total: 0
      },
      showDialog: false,
      showCanvas: false,
      showRoleDialog: false,
      userId: ''
    }
  },
  created() {
    this.getEmployeeList()
  },
  methods: {
    // 点击角色按钮，编辑角色 处理函数
    async editRole(id) {
      // 如果网络较慢的时候，会先弹出弹窗，再显示数据，用户体验不好，所以我们需要先等到数据加载完毕后，再弹出弹窗
      // 调用子组件中的getUserDetail方法，把id传过去
      await this.$refs.assignRole.getUserDetail(id)
      // 显示弹框
      this.showRoleDialog = true
      // 把id传递给父组件，用作发送请求
      this.userId = id
    },
    // 点击员工列表中的图片，显示二维码处理函数
    showQrCode(url) {
      this.showCanvas = true
      this.$nextTick(() => {
        if (url) {
          QRCode.toCanvas(this.$refs.myCanvas, url, {
            width: 300,
            color: {
              dark: '#577cff'
            }
          })
        }
      })
    },
    // 封装请求员工列表函数
    async getEmployeeList() {
      const { total, rows } = await getEmployee(this.page)
      // console.log(rows)
      this.list = rows
      this.page.total = total
    },
    // 翻页处理函数
    currentChange(newPage) {
      this.page.page = newPage
      this.getEmployeeList()
    },
    // 格式化聘用模式函数
    fromatFormEmployment(row, column, cellValue) {
      // 在枚举文件中的聘用形式数据，寻找表格中的符合的数据，枚举数据中的id就是原来的聘用形式数据
      const obj = employmentEnum.hireType.find(
        (item) => item.id === Number(cellValue)
      )
      return obj ? obj.value : '未知'
    },
    // 导出功能
    async exportEmployees() {
      // 这个文件中暴露了两个函数，export_json_to_excel和export_table_to_excel，而我们需要的是export_json_to_excel，所以解构出来即可
      const { export_json_to_excel } = await import('@/vendor/Export2Excel')
      console.log(export_json_to_excel)

      const dict = {
        //   data: [
        姓名: 'username',
        手机号: 'mobile',
        入职日期: 'timeOfEntry',
        聘用形式: 'formOfEmployment',
        转正日期: 'correctionTime',
        工号: 'workNumber',
        部门: 'departmentName'
      }

      // 获取到所有员工数据
      const { rows } = await getEmployee({ page: 1, size: this.page.total })
      console.log(rows)

      const userData = rows.map((user) => {
        return this.Object2Array(user, dict)
      })
      console.log(userData)
      // 这个函数有一个对象参数，可以通过按需填写参数来进行设置
      export_json_to_excel({
        header: Object.keys(dict), // 表头，使用我们的字典dict中的key，通过Object.keys()可以获取到一个对象中的所有key
        data: userData, // 数组套数组的形式，填用户的信息,表数据
        filename: 'mylist' // filename:就是我们自定义文件的名字
      })
    },
    // 把获取到的员工数据从对象形式转换成数组
    Object2Array(user, dict) {
      // 定义一个新数组，因为导出功能需要的是数组包数组形式
      const newUser = []

      // 遍历dict这个对象，获取到字典中的key对应的英文，用来获取到user中的值
      for (const key in dict) {
        // 使用字典dict获取到对应的key的值，因为获取的数据key是英文
        const enKey = dict[key]
        // 获取user对应的值，这里的enKey就是user的key值，那么user[enKey]就可以获取到user的key对应的值
        const value = user[enKey]
        // 把表中的时间通过过滤器中的处理时间函数调用一下
        if (enKey === 'timeOfEntry' || enKey === 'correctionTime') {
          newUser.push(new Date(formatDate(value)))
        } else if (enKey === 'formOfEmployment') {
          const obj = employmentEnum.hireType.find((item) => item.id === value)
          newUser.push(obj.value)
        } else {
          // 把获取到value值push到新定义的newUser数组
          newUser.push(value)
        }
      }
      // 把每次遍历好的newUser数组返回出去
      return newUser
    },
    // 删除员工处理函数
    async delEmployee(id) {
      // 二次校验：确认删除
      await this.$confirm('是否真的删除？')
      // 发送请求
      await delEmployee(id)
      // 提示信息
      this.$message.success('删除成功')
      if (this.list.length === 1 && this.page.page > 1) {
        this.page.page--
      }
      // 刷新列表
      this.getEmployeeList()
    },
    // 新增员工处理函数
    addEmployee() {
      this.showDialog = true
    },
    // 添加员工，重新加载数据，并且跳到最后一页
    async refreshEmployeeList() {
      // 每次新增一个成员，都会跳到最后一页，用总条数/一页多少条数据，再向上取整，就可以得到最后一页
      // 因为新增一条，因为在父组件中监听的事件，不是马上刷新，所以需要手动增加一条总条数
      this.page.page = Math.ceil(++this.page.total / this.page.size)
      // this.getEmployeeList()
      this.currentChange(this.page.page)
    }
  }
}
</script>

<style>
</style>
